<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
	<html>
		<head>
			<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
			<title>statusbar</title>
			<script type="text/javascript">var CTP_WEB_FULLPATH = "../../"</script>
			<script type="text/javascript" src="../../js/jquery/jquery.js">
            </script>
            <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
            </script>
            <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
            </script>
			<script type="text/javascript" src="../../js/jquery.bgiframe.js">
            </script>
            <script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
            </script>
			<script type="text/javascript" src="../../js/ctp/statusbar/ctp.ui.statusbar.js">
            </script>
			
		    
			<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
			<link href="../../css/button.css" rel="stylesheet" type="text/css"/>
			<link href="../../css/statusbar.css" rel="stylesheet" type="text/css"/>
			<script>
				var _stb;
				var _stb2;
				//$(window).load(function(){
				$(document).ready(	
					function(){
						new ctp.ui.panel({
							title: 'statusbar实例',
							collapsible: true,
							width: '1000px',
							height: '400px',
							renderTo: 'container',
							html:'tooltipDiv'
						});
						
					}
				);
				
				newStatusBar = function(){
					var _visible;
					_visible = $('#isVisible').attr('value')=='false'?false:true;
					_stb = new ctp.ui.statusbar({
						defText: $('#defText').attr('value'),
						opText: $('#opText').attr('value'),
						isVisible: _visible,
						renderTo: $('#renderTo').attr('value')
					});
					
				}
				delStatusBar = function(){
					_stb.remove();
				}
				setDisplayOn = function(){
					_stb.setVisible(true);
				}
				setDisplayOff = function(){
					_stb.setVisible(false);
				}
				setStatusbarStop = function(){
					var boolScreen;
					boolScreen=$('#screen').attr('value')=='true'?true:false;
					_stb.endShow(boolScreen);
				}
				setStatusbarGoOn = function(){
					var boolScreen;
					boolScreen=$('#screen').attr('value')=='true'?true:false;
					_stb.showTime({
						opTimeValue:$('#time').attr('value')*1,
						boolScreen:boolScreen,
						timeOutValue:$('#timeout').attr('value')*1
					});
				}
				renderTo = function(){
					_stb.renderTo($('#renderTo').attr('value'));
				}
				testGoOn = function(){
					_stb2 = new ctp.ui.statusbar({
						renderTo:'tooltipDiv'
					});
					_stb2.showTime({
						opTimeValue:3000,
						boolScreen:true,
						timeOutValue:10000
					});
				}
				setDefText = function(){
					_stb.setDefText($('#defText').attr('value'));
				}
				setOpText = function(){
					_stb.setOpText($('#opText').attr('value'));
				}
			</script>
		</head>
			<b>CTP.statusbar实例</b><hr /><br />
			<div id="container">
			</div>
			<div id="tooltipDiv">
			<div id="test">
				初始文字：<input id = 'defText' value='Ready' / >
				运行时显示的文字：<input id = 'opText' value='Loading...' / >
				是否显示(true或者false)：<input id = 'isVisible' value='true' / >
				继承组件：<input id = 'renderTo' value='tooltipDiv' / >
				运行时间：<input id = 'time' value=0 / >
				延迟等待时间：<input id = 'timeout' value=10000 / >
				是否锁屏(true或者false)：<input id = 'screen' value='true' / >
				<button onclick='newStatusBar()'>创建statusbar</button>
				<button onclick='delStatusBar()'>删除statusbar</button>
				<button onclick='setDefText()'>修改初始文字</button>
				<button onclick='setOpText()'>修改运行时文字</button>
				<button onclick='renderTo()'>加载statusbar</button>
				<button onclick='setDisplayOn()'>显示statusbar</button>
				<button onclick='setDisplayOff()'>隐藏statusbar</button>
				<button onclick='setStatusbarGoOn()'>运行statusbar</button>
				<button onclick='setStatusbarStop()'>停止statusbar</button>
				<button onclick='testGoOn()' style='color:blue'>状态条运行测试</button>
			</div>
			<br />
			</div>
		</body>
	</html>